import Vue from "vue";
import VueRouter from "vue-router";
// import Home from "../views/Home.vue";
import loadable from "@/utils/loadable.js";
import Home from "@/views/home/index.vue";
import hooks from "./hooks.js";

Vue.use(VueRouter);
// 自动生成路由 不建议，  不建议路由自动配置  可配置性比较低（批注和钩子）
// webapp 活动页
const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/lesson",
    name: "lesson",
    component: loadable(() => import("@/views/lesson/index.vue")), // ? 默认白页  加载完毕再去渲染
    // 有时采用prefetch 或者增加 loading
    meta: {
      needLogin: true, // 必须需要登录
    },
  },
  {
    path: "/profile",
    name: "profile",
    component: loadable(() => import("@/views/profile/index.vue")),
  },
  {
    path: "/login",
    name: "login",
    component: loadable(() => import("@/views/login/index.vue")),
  },
  {
    path: "/register",
    name: "register",
    component: loadable(() => import("@/views/register/index.vue")),
  },
  // {
  //   path: '/',
  //   name: 'Home',
  //   component: Home
  // },
  // {
  //   path: '/about',
  //   name: 'About',
  //   // route level code-splitting
  //   // this generates a separate chunk (about.[hash].js) for this route
  //   // which is lazy-loaded when the route is visited.
  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  // }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

// vue3中支持了await的用法
Object.values(hooks).forEach((hook) => {
  router.beforeEach(hook);
});

export default router;
